<template>
  <h1>{{person}}</h1>
  <h1>人的名字{{name}}</h1>
  <h1>人的年龄{{age}}</h1>
  <h1>人的薪水{{job.j1.salary}}K</h1>
  <button @click="name = name + '~'">点击修改名字</button>
  <button @click="age++">点击修改名字</button>
  <button @click="job.j1.salary++">点击涨薪</button>
</template>

<script>
import {reactive, toRef, toRefs} from "vue";
export default {
  name: "my-demo",
  setup() {
    let person =reactive({
      name:"张三",
      age:'18',
      job:{
        j1:{
          salary:5
        }
      }
    });
    return{
      person,
      //模板中使用数据(对象类型) 每次还要用.调用属性比较麻烦 所以用toRef直接以响应式调用睡醒
      //一个一个写比较麻烦
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      // job:toRef(person,'job')
      //用toRefs直接写 将属性平铺在这里
      ...toRefs(person)
    }
  }
}
</script>

<style scoped>

</style>